<template>

  <view class="content">
    <View class="block1">
      <view class="search">
        <!-- <tui-searchbar radius="40rpx" placeholder="搜索" disabled></tui-searchbar> -->
        <tui-icon class="search-icon" name="search"></tui-icon>
        <tui-input class="search-input" placeholder="搜索景点/路线..."></tui-input>
        <tui-text class="search-text" text="搜索"></tui-text>
      </view>
    </View>

    <View class="block3">

      <view class="block3-tab">
        <tui-tab :size="40" :tabs="tabs" backgroundColor="#00c96000" bold color="#999" selectedColor="#4186F5"
                 sliderBgColor="#4186F5" @change="handleChange"></tui-tab>
      </view>
    </View>

    <view class="block4">
      <block v-for="(item,index) in PopularRoute" v-if="current == 1">
        <luxian :objData="item"></luxian>
      </block>
      <block v-for="(item,index) in listData" v-if="current == 0">
        <jingdian :objData="item"></jingdian>
      </block>
    </view>

    <view class="block5">
      <view class="noMore">
        <tui-nomore backgroundColor="#F2F2F2" text="到底了 "></tui-nomore>
      </view>
    </view>
  </view>
</template>

<script>
import jingdian from '@/components/diy/jingdian';
import luxian from '@/components/diy/luxian';

export default {
  components: {
    jingdian,
    luxian
  },
  data() {
    return {
      tabs: ['热门景点', '热门路线'],
      current: 0,
      listData: [{
        image: 'https://echengtuhua.oss-cn-shenzhen.aliyuncs.com/%E5%A2%A8%E5%9B%AD%E6%9D%91.png',
        title: '墨园村“大夫第”',
        lable: ['历史文化', '红色之旅'],
        detail: '沿着村道走进村里，村中最大规模的古建筑是“大夫',
        hot: 888,
      }, {
        image: 'https://echengtuhua.oss-cn-shenzhen.aliyuncs.com/%E5%A2%A8%E5%9B%AD%E6%9D%91.png',
        title: '墨园村“大夫第”',
        lable: ['历史文化', '红色之旅'],
        detail: '沿着村道走进村里，村中最大规模的古建筑是“大夫',
        hot: 888,
      }, {
        image: 'https://echengtuhua.oss-cn-shenzhen.aliyuncs.com/%E5%A2%A8%E5%9B%AD%E6%9D%91.png',
        title: '墨园村“大夫第”',
        lable: ['历史文化', '红色之旅'],
        detail: '沿着村道走进村里，村中最大规模的古建筑是“大夫',
        hot: 888,
      },],

      PopularRoute: [
        {
          image: '../../static/bg.jpeg',
          title: '亚洲三日游',
          lable: ['郊游'],
          type: ['春游', '全球旅行'],
          price: 67,
          detail: '20个景点｜22个任务｜全程65km',
          travelAgency: '鹅途旅行社',
          hot: 6767,
          hotLogo: 'https://echengtuhua.oss-cn-shenzhen.aliyuncs.com/%E8%B7%AF%E5%BE%84%20404.png',
          headPortrait: 'https://echengtuhua.oss-cn-shenzhen.aliyuncs.com/%E5%A4%B4%E5%83%8F.png'
        },
        {
          image: '../../static/bg.jpeg',
          title: '亚洲三日游',
          lable: ['郊游'],
          type: ['春游', '全球旅行'],
          price: 67,
          detail: '20个景点｜22个任务｜全程65km',
          travelAgency: '鹅途旅行社',
          hot: 6767,
          hotLogo: 'https://echengtuhua.oss-cn-shenzhen.aliyuncs.com/%E8%B7%AF%E5%BE%84%20404.png',
          headPortrait: 'https://echengtuhua.oss-cn-shenzhen.aliyuncs.com/%E5%A4%B4%E5%83%8F.png'
        },
        {
          image: '../../static/bg.jpeg',
          title: '亚洲三日游',
          lable: ['郊游'],
          type: ['春游', '全球旅行'],
          price: 67,
          detail: '20个景点｜22个任务｜全程65km',
          travelAgency: '鹅途旅行社',
          hot: 6767,
          hotLogo: 'https://echengtuhua.oss-cn-shenzhen.aliyuncs.com/%E8%B7%AF%E5%BE%84%20404.png',
          headPortrait: 'https://echengtuhua.oss-cn-shenzhen.aliyuncs.com/%E5%A4%B4%E5%83%8F.png'
        }
      ]
    }
  },
  methods: {
    handleChange(index) {
      this.activeTab = this.tabs[index];
      this.current = index.index
    }
  }
}
</script>

<style>
.search {
  width: 100%;
  height: 100rpx;
  padding: 0 30rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 添加边框样式 */
  border-radius: 8rpx;
  /* 圆角半径，可以根据需要调整 */
  background-color: #fff;
}

.block1 {
  width: 684rpx;
}

.block4 {
  background-color: #F2F2F2;
}

.noMore {
  background-color: #F2F2F2;
  width: 100%;
  height: 250rpx;
}
</style>
